<template>
    <div class="flex_checkBox">
        <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="toggleAll" size="mini">
            <el-checkbox :label="tags.all" key="all">全部</el-checkbox>
        </el-checkbox-group>
        <div class="checkBox_li">
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="toggleAllAgent" size="mini">
                <el-checkbox :label="tags.allAgent" key="allAgent">各级代理</el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="changeAgent" size="mini">
                <div v-show="toggleShow">
                    <div v-for="tag in tags.agents" :key="tag.roleCode">
                        <el-checkbox :label="tag.roleCode">
                            {{tag.roleName}}
                        </el-checkbox>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
        <div class="checkBox_li">
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="toggleAllDistributor" size="mini">
                <el-checkbox :label="tags.allDistributor" key="allDistributor">所有经销商</el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="changeDistributor" size="mini">
                <div v-show="toggleShow">
                    <div v-for="tag in tags.distributors" :key="tag.roleCode">
                        <el-checkbox :label="tag.roleCode">
                            {{tag.roleName}}
                        </el-checkbox>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
        <div class="checkBox_li">
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="toggleAllStationmaster" size="mini">
                <el-checkbox :label="tags.allStationmaster" key="allStationmaster">站长</el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="changeStationmaster" size="mini">
                <div v-show="toggleShow">
                    <div v-for="tag in tags.stationmasters" :key="tag.roleCode">
                        <el-checkbox :label="tag.roleCode">
                            {{tag.roleName}}
                        </el-checkbox>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
        <div class="checkBox_li">
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="toggleAllUser" size="mini">
                <el-checkbox :label="tags.allUser" key="allUser">所有用户</el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group class="checkBox_li" v-model="checkTag" @change="changeUser" size="mini">
                <div v-show="toggleShow">
                    <div v-for="tag in tags.users" :key="tag.roleCode">
                        <el-checkbox :label="tag.roleCode">
                            {{tag.roleName}}
                        </el-checkbox>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
        <div @click="toggleShow = !toggleShow">
            <el-icon v-show="!toggleShow" class="el-icon-caret-bottom"></el-icon>
            <el-icon v-show="toggleShow" class="el-icon-caret-top"></el-icon>
        </div>
    </div>
</template>
<script>
    import service from '@/api/service'

    export default {
        name: 'purchasableCrowd',
        data() {
            return {
                tags: {},
                checkTag: this.defaultTags,
                toggleShow: false,
            }
        },
        props: {
            defaultTags: {
                type: Array,
                default: () => []
            },
            serviceUrl: {}
        },
        methods: {
            //全选
            toggleAll(value) {
                //console.log(value)
                let all = value.filter(item => {
                    return item.id === 'all'
                })
                if (all && all.length !== 0) {
                    this.checkTag = value.concat(all[0].children, [this.tags.allAgent, this.tags.allDistributor, this.tags.allStationmaster, this.tags.allUser])
                } else {
                    this.checkTag = []
                }
            },
            //代理
            toggleAllAgent(value) {
                //console.log(value, 'allAgent')
                let allAgent = value.filter(item => {
                    return item.id === 'allAgent'
                })
                if (allAgent && allAgent.length !== 0) {
                    this.checkTag = Array.from(new Set(value.concat(allAgent[0].children)))
                } else {
                    this.checkTag = value.filter(item => {
                        return !this.tags.allAgent.children.includes(item) && !(item.id && item.id === 'all')
                    })
                }
            },
            changeAgent(value) {
                //console.log(value)
                this.checkTag = value.filter(item => {
                    return !(item.id && item.id === 'allAgent')
                })
            },
            //经销商
            toggleAllDistributor(value) {
                //console.log(value)
                let allDistributor = value.filter(item => {
                    return item.id === 'allDistributor'
                })
                if (allDistributor && allDistributor.length !== 0) {
                    this.checkTag = Array.from(new Set(value.concat(allDistributor[0].children)))
                } else {
                    this.checkTag = value.filter(item => {
                        return !this.tags.allDistributor.children.includes(item)
                    })
                }
            },
            changeDistributor(value) {
                //console.log(value)
                this.checkTag = value.filter(item => {
                    return !(item.id && item.id === 'allDistributor')
                })
            },
            //站长
            toggleAllStationmaster(value) {
                //console.log(value)
                let allStationmaster = value.filter(item => {
                    return item.id === 'allStationmaster'
                })
                if (allStationmaster && allStationmaster.length !== 0) {
                    this.checkTag = Array.from(new Set(value.concat(allStationmaster[0].children)))
                } else {
                    this.checkTag = value.filter(item => {
                        return !this.tags.allStationmaster.children.includes(item)
                    })
                }
            },
            changeStationmaster(value) {
                //console.log(value)
                this.checkTag = value.filter(item => {
                    return !(item.id && item.id === 'allStationmaster')
                })
            },
            //用户
            toggleAllUser(value) {
                //console.log(value)
                let allUser = value.filter(item => {
                    return item.id === 'allUser'
                })
                if (allUser && allUser.length !== 0) {
                    this.checkTag = Array.from(new Set(value.concat(allUser[0].children)))
                } else {
                    this.checkTag = value.filter(item => {
                        return !this.tags.allUser.children.includes(item)
                    })
                }
            },
            changeUser(value) {
                //console.log(value)
                this.checkTag = value.filter(item => {
                    return !(item.id && item.id === 'allUser')
                })
            }
        },
        watch: {
            checkTag: function (n) {
                console.log(n)
                this.$emit('submit', n)
            },
            defaultTags: function (n) {
                this.checkTag = n
            }
        },
        async created() {
            const res = await service[this.serviceUrl]({})
            if (res.status < 400 && res.res) {
                let tags = {}
                tags.all = {
                    id: 'all',
                    children: res.res.map(item => {
                        return item.roleCode
                    })
                }
                //代理
                tags.allAgent = res.res.filter(item => {
                    return item.group === 1
                })
                tags.allAgent = {
                    id: 'allAgent',
                    children: tags.allAgent.map(item => {
                        return item.roleCode
                    })
                }
                tags.agents = res.res.filter(item => {
                    return item.group === 1
                })
                //经销商
                tags.allDistributor = res.res.filter(item => {
                    return item.group === 2
                })
                tags.allDistributor = {
                    id: 'allDistributor',
                    children: tags.allDistributor.map(item => {
                        return item.roleCode
                    })
                }
                tags.distributors = res.res.filter(item => {
                    return item.group === 2
                })
                //站长
                tags.allStationmaster = res.res.filter(item => {
                    return item.group === 3
                })
                tags.allStationmaster = {
                    id: 'allStationmaster',
                    children: tags.allStationmaster.map(item => {
                        return item.roleCode
                    })
                }
                tags.stationmasters = res.res.filter(item => {
                    return item.group === 3
                })
                //用户
                tags.allUser = res.res.filter(item => {
                    return item.group === 4
                })
                tags.allUser = {
                    id: 'allUser',
                    children: tags.allUser.map(item => {
                        return item.roleCode
                    })
                }
                tags.users = res.res.filter(item => {
                    return item.group === 4
                })
                ///console.log(tags)
                this.tags = tags
            }
        }
    }
</script>
<style scoped lang="stylus">
    .flex_checkBox
        display flex
        font-size 14px

        .checkBox_li
            flex 1
</style>
